"use strict"; //严格模式

$(function(){
	var width = 720;
	var animationSpeed = 1000;
	var pause = 3000;

	//将DOM缓存，之后就不用再去查找相应的DOM选择器了
	var slider = $('#slider');
	var slideContainer = slider.find('.slides');
	var slides = slideContainer.find('.slide');

	var interval;

	function startSlider(){
		//setInterval定时器
		interval = setInterval(function(){
			slideContainer.stop(true,true).animate({'margin-left': '-='+width}, animationSpeed, function(){
				/*
				* insertAfter在被选中的元素后面插入HTML元素 
				* 在每个 <p> 元素后插入一个 <span> 元素：
				* $("button").click(function(){
				* $("<span>Hello world!</span>").insertAfter("p");
				* });
				*/
				 $(".slides").children("li:first").insertAfter($(".slides").children("li:last"));
                 $(".slides").css("margin-left", 0);
			});
		},pause);
	}
	function stopSlider(){
		clearInterval(interval);
	}
	//监听鼠标事件，鼠标移入停止轮播图，鼠标移出继续  
	slider.on('mouseenter',stopSlider).on('mouseleave',startSlider);
	startSlider();
});